<template>
    <el-main>
        <el-row :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <avue-crud ref="crud" :data="friendLinkListData" :option="option" :page="page" @refresh-change="refresh"
                    @size-change="sizeChange" @current-change="currentChange" @row-save="handleSave" @row-update="handleUpdate"
                    @search-change="searchChange" @search-reset="searchReset">
                    <template slot-scope="scope" slot="menu">
                        <el-button :size="scope.size" :type="scope.type" v-if="scope.row.status === 1"
                            @click="handleDisable(scope.row)">禁用</el-button>
                        <el-button :size="scope.size" :type="scope.type" v-if="scope.row.status === 0"
                            @click="handleEnable(scope.row)">启用</el-button>
                        <el-button icon="el-icon-edit" :size="scope.size" :type="scope.type" @click="$refs.crud.rowEdit(scope.row, scope.index)">编辑</el-button>
                    </template>
                    <template slot="status" slot-scope="scope">
                        <div v-if="scope.row.status === 1" style="color:#13ce66">启用</div>
                        <div v-if="scope.row.status === 0" style="color:#ff4949">禁用</div>
                    </template>
                    <template slot="statusForm" slot-scope="scope">
                        <div>
                            <el-radio-group v-model="scope.row.status">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </div>
                    </template>
                    <template slot-scope="scope" slot="imagesrcForm">
                        <img :src="scope.row.imagesrc" :width="cutWidthpx" :height="cutHeightpx" />
                    </template>
                    <template slot-scope="scope" slot="imagesrcupForm">
                        <ImgCutter ref="imgCutterModal" label="裁剪本地图片" :crossOrigin="true" :isModal="false" :showChooseBtn="true"
                            :lockScroll="true" :boxWidth="600" :boxHeight="458" :cutWidth="cutWidth" :cutHeight="cutHeight" :sizeChange="true"
                            :moveAble="true" :originalGraph="false" v-on:cutDown="cutDown($event, scope.row)">
                            <el-button type="primary" slot="cancel" @click="cancelImg($event, scope.row)" >取消</el-button>
                        </ImgCutter>
                    </template>
                </avue-crud>
            </el-card>
        </el-row>
    </el-main>
</template>


<!-- <template slot-scope="scope" slot="nameForm">
    <ImgCutter ref="imgCutterModal" label="裁剪本地图片" :crossOrigin="true" :isModal="false" :showChooseBtn="true"
        :lockScroll="true" :boxWidth="600" :boxHeight="458" :cutWidth="cutWidth" :cutHeight="cutHeight" :sizeChange="true"
        :moveAble="true" :originalGraph="false" v-on:cutDown="cutDown($event, scope.row)">
        <el-button type="primary" slot="cancel" @click="cancelImg($event, scope.row)" >取消</el-button>
    </ImgCutter>
</template>
<template slot-scope="scope" slot="sexForm">
    <img :src="scope.row.sex" :width="cutWidthpx" :height="cutHeightpx" />
</template> -->

<script>
    import ImgCutter from 'vue-img-cutter'
    export default {

        data() {
            return {
                cutWidth: 220,
                cutHeight: 60,
                cutWidthpx: '220px',
                cutHeightpx: '60px',
                searchForm: {
                    keyword: '',
                    status: '',
                },
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
                status: "1",
                friendLinkListData: [],
                option: {
                    page: true,
                    align: 'center',
                    menuAlign: 'center',
                    size: 'small',
                    dialogWidth: 800,
                    dialogTop: 200,
                    delBtn: false,
                    editBtn: false,
                    viewBtn: true,
                    searchBtn: true,
                    searchShow: true,
                    filterBtn: false,
                    columnBtn: false,
                    searchMenuSpan: 5,
                    column: [{
                        label: '状态',
                        prop: 'status',
                        addDisplay: false,
                        editDisplay: true,
                        span: 24,
                        slot: true,
                        formslot: true,
                        rules: [{
                            required: true
                        }]
                    }, {
                        label: '标识',
                        prop: 'tags',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "标识不能为空",
                        }]
                    }, {
                        label: '起始时间',
                        prop: 'startdate',
                        type: "datetime",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "起始时间不能为空",
                        }]
                    }, {
                        label: '截止时间',
                        prop: 'enddate',
                        type: "datetime",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                        span: 24,
                    }, {
                        label: '链接名称',
                        prop: 'name',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "链接名称不能为空",
                        }]
                    }, {
                        label: '上传图片',
                        prop: 'imagesrcup',
                        span: 24,
                        viewDisplay: false,
                        formslot: true,
                        hide: true
                    }, {
                        label: '链接图片',
                        prop: 'imagesrc',
                        span: 24,
                        formslot: true,
                        hide: true
                    }, {
                        label: '跳转链接',
                        prop: 'links',
                        span: 24,
                        rules: [{
                            required: true,
                            message: "跳转链接不能为空",
                        }]
                    }, {
                        label: '描述备注',
                        prop: 'content',
                        span: 24,
                        type: 'textarea',
                        hide: true
                    }, {
                        label: '创建时间',
                        prop: 'created_at',
                        addDisplay: false,
                        editDisplay: false,
                        span: 24,
                        width: 140
                    }, {
                        label: '关键字',
                        prop: 'keyword',
                        addDisplay: false,
                        editDisplay: false,
                        viewDisplay: false,
                        search: true,
                        span: 24,
                        width: 180,
                        hide: true,
                        searchPlaceholder: '链接名称|标识'
                    }]
                },
            }
        },
        components: {
            ImgCutter
        },
        created() {
            this.getFriendLinkList()
        },
        methods: {
            cutDown(file, row) {
                let imgSrc = file.dataURL;
                row.imagesrc = imgSrc
            },
            cancelImg(file, row) {
                row.imagesrc = ''
            },
            searchChange(params, done) {
                done();
                this.searchForm.keyword = params.keyword || ''
                this.searchForm.status = params.status
                this.getFriendLinkList()
            },
            searchReset() {
                this.searchForm.keyword = ''
                this.searchForm.status = ''
                this.getFriendLinkList()
            },
            // 分页
            sizeChange(val) {
                this.page.currentPage = 1
                this.page.pageSize = val
                this.getFriendLinkList()
            },
            // 当前页
            currentChange(val) {
                this.page.currentPage = val
                this.getFriendLinkList()
            },
            // 刷新
            refresh() {
                this.getFriendLinkList()
            },
            // 新增保存
            handleSave(row, done, loading) {
                this.handleAxiosFun(this.$API.ZHIHUAPI.friendLinkCreate, row, done, loading)
            },
            // 修改保存
            handleUpdate(row, index, done, loading) {
                this.handleAxiosFun(this.$API.ZHIHUAPI.friendLinkEdit, row, done, loading)
            },
            // 禁用
            handleDisable(row) {
                const params = {
                    id: row.id,
                    status: 0
                }
                this.handleAxiosFun(this.$API.ZHIHUAPI.friendLinkStatus, params)
            },
            // 启用
            handleEnable(row) {
                const params = {
                    id: row.id,
                    status: 1
                }
                this.handleAxiosFun(this.$API.ZHIHUAPI.friendLinkStatus, params)
            },
            getFriendLinkList() {
                const _this = this
                const params = {
                    keyword: _this.searchForm.keyword,
                    status: _this.searchForm.status,
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                }
                _this.axios.post(_this.$API.ZHIHUAPI.friendLinkList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.friendLinkListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.friendLinkListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.friendLinkListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.friendLinkListData = []
                    _this.page.total = 0
                })
            },
            handleAxiosFun(url, params, done, loading) {
                const _this = this
                _this.axios.post(url, _this.qs.stringify(params)).then((res) => {
                    if (res.data.code === 10000) {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'success'
                        })
                        _this.refresh()
                        if (done) {
                            done()
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.data.message,
                            type: 'error'
                        })
                        if (loading) {
                            loading()
                        }
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    if (loading) {
                        loading()
                    }
                })
            }
        }
    }
</script>
